<template>
  <el-button key="info" type="info" link style="position: absolute;font-size: 11px;left:10px;" @click="getEg()">填入示例+ </el-button>
    <div style="position: relative; z-index: 1;">
        <el-form :model="qustionRequire" :rules="rules" ref="formRef" label-width="13px" style="position:absolute;top:0px;">
    <!-- 年级选择 -->
    <el-form-item label="" prop="grade" class="custom-form-item">
      <span class="custom-label">年级</span>
      <el-select
        v-model="qustionRequire.grade"
        placeholder="请选择年级"
        class="custom-select"
      >
        <el-option
          v-for="grade in gradeOptions"
          :key="grade.value"
          :label="grade.label"
          :value="grade.value"
        />
      </el-select>
    </el-form-item>

    <!-- 知识点输入 -->
    <el-form-item label="" prop="knowledge">
        <span class="custom-label">知识点</span>
      <el-input class="input" v-model="qustionRequire.knowledge" placeholder="请输入知识点" />
    </el-form-item>

    <!-- 类型选择 -->
    <el-form-item label="" prop="type">
        <span class="custom-label">类型</span>
      <el-select v-model="qustionRequire.type" placeholder="请选择类型" class="custom-select">
        <el-option
          v-for="type in typeOptions"
          :key= "type.value"
          :label="type.label"
          :value="type.value"
        />
      </el-select>
    </el-form-item>

    <!-- 数量输入 -->
    <el-form-item label="" prop="count">
    <span class="custom-label">数量</span>
      <el-input
        v-model.number="qustionRequire.count"
        placeholder="请输入数量"
        type="number"
        class="input"
      />
    </el-form-item>

    <!-- 难度选择 -->
    <el-form-item label="" prop="difficulty">
    <span class="custom-label" style="width:300px;margin:0px;padding:0px; ">难度</span>
    <el-rate
    v-model="qustionRequire.difficulty"
    :texts="['也就just so so啦~', 'easy~', '正常', '有点难度吼', '是给人做的吗']"
    show-text
  />
    </el-form-item>

    <!-- 其他信息输入 -->
    <el-form-item label="" prop="other">
        <span class="custom-label">其他要求</span>
      <el-input v-model="qustionRequire.other" placeholder="请输入其他信息" class="input"/>
    </el-form-item>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm" style="position: absolute;width:95%;top:10px;">一键生成</el-button>
      <el-button @click="resetForm" style="position: absolute;width:95%;top:60px;left:-10px;">重置选择</el-button>
    </el-form-item>
  </el-form>
  
          </div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus'

const formRef = ref<FormInstance>();//表单引用
const qustionRequire = reactive({
  grade: '',
  knowledge: '',
  type: '',
  count: 1,
  other: '',
  difficulty: 1,
});
function getEg(){
    qustionRequire.grade='8'
    qustionRequire.knowledge='导数'
    qustionRequire.type='choice1'
    qustionRequire.count=10
    qustionRequire.other='无'
    qustionRequire.difficulty=3
}
// 年级选项
const gradeOptions = [
  { label: '一年级', value: '1' },
  { label: '二年级', value: '2' },
  { label: '三年级', value: '3' },
  { label: '四年级', value: '4' },
  { label: '五年级', value: '5' },
  { label: '六年级', value: '6' },
  { label: '初中', value: '7' },
  { label: '高中', value: '8' },
  { label: '大学', value: '9' },
  { label: '等级考试', value: '10' },
];

// 类型选项
const typeOptions = [
  { label: '单选题', value: 'choice1' },
  { label: '多选题', value: 'choice2' },
  { label: '填空题', value: 'fill' },
  { label: '解答题', value: 'answer' },
];

// 表单校验规则
const rules = reactive<FormRules>({
  grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
  knowledge: [{ required: true, message: '请输入知识点', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  count: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' },
  ],
  other: [{ required: true, message: '请输入其他信息', trigger: 'blur' }],
});


const emit = defineEmits<{
  (e: 'changeState', param: boolean): void;
  (e: 'changeInternetState',param:boolean):void;
  (e: 'changeDrawer',param:boolean):void
}>();

import { useCounterStore } from '@/stores/counter';
const Store = useCounterStore();
import axios from 'axios'
// 提交表单
const submitForm = () => {
  formRef.value?.validate((valid, fields) => {
    if (valid) {
      console.log('表单数据:', qustionRequire);
      ElMessage({
        message: '提交成功，正在解析.',
        type: 'success',
      })
      emit('changeState', true);
  emit('changeInternetState', true);
  axios({
    url:"https://m1.apifoxmock.com/m1/5997017-0-default/teacher/exercise/generatebyjson",
    method:'GET',
    data:{
      grade:qustionRequire.grade,
      point:qustionRequire.knowledge,
      type:qustionRequire.type,
      number:qustionRequire.count,
      other:qustionRequire.other,
      difficulty:qustionRequire.difficulty,
    }
  }).then((response)=>{
    if(response.data.code===1){
      emit('changeState', false)
      console.log("生成的题目为"+response.data.data.exercise)
      Store.getQuestion(response.data.data.exercise)
      emit('changeDrawer',false)//关闭抽屉
    }else{
      //获取失败后的行为
      console.log("生成失败")
      emit('changeState', false)
      emit('changeInternetState', false);
    }
  }).catch(error => {
      alert("出现" + error + "错误，请重新操作")
      emit('changeState', false)
      emit('changeInternetState', false);
    })
    } else {
      console.log('表单校验失败', fields);
    }
  });
  emit('changeDrawer',false)
};

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
};
</script>

<style scoped>
.el-form {
  max-width: 500px;
  margin-top: 20px;
}
.el-form-item{
    margin: 0px;
    margin-top: 10px;
}
.custom-select, .input{
    width: 95%;
}
::v-deep.custom-select .el-input__inner{
  font-size: 16px; /* 放大选择框字体 */
  height: 80px; /* 增加选择框高度 */
  line-height: 40px; /* 垂直居中 */
  background-color: #e6f7ff; /* 设置背景颜色为浅蓝色 */
  border-color: #409EFF;
}

</style>